<template>
	<page-meta :page-style="'overflow:'+(show?'hidden':'visible')"></page-meta>
	<view>
		<view class="header">
			<image class="avatar" :src="card.url"></image>
		</view>
		<view class="buttons">
			<button class="share-btn" @click="share">点击分享</button>
			<button class="save-btn" @click="onSaveContact">存入手机通讯录</button>
		</view>
		<scroll-view scroll-x="true">
			<view class="contact-wrapper">
				<view class="contact-info" @click="callNumber">
					<view class="contact-row">
						<uni-icons type="phone-filled" size="25" />
						<text class="lable">拨打电话</text>
					</view>
					<text class="info">{{card.phone}}</text>
				</view>
					<image style="flex-shrink: 0;
					width: 55%;height:auto;margin-right: 10px;margin-top: 5px;margin-bottom: 5px; border-radius: 10px;box-shadow: 0  0 4px rgba(0, 0, 0, 0.1);" src="../../static/to.jpg" mode="widthFix" @click="to" />
				<view class="contact-info" @click="copy(card.email)">
					<view class="contact-row">
						<uni-icons type="email" size="25" />
						<text class="label">复制邮箱</text>
					</view>
					<text class="info">{{card.email}}</text>
				</view>
				<view class="contact-info" @click="copy(card.address)">
					<view class="contact-row">
						<uni-icons type="location-filled" size="25" />
						<text class="label">复制地址</text>
					</view>
					<text class="info">{{card.address}}</text>
				</view>
			</view>
		</scroll-view>

		<view style="margin-top: 20px;">
			<text class="title">个人介绍</text>
			<view class="card">
				<image class="profile-pic" 
					   :src="item"
					   mode="widthFix"
					   style="height: auto;vertical-align:bottom"
					   v-for="(item,index) in card.description"
					:key="index"></image>
						
					  <template v-for="(item, index) in formattedList" :key="index">
					    <image 
					      v-if="item.type === 'image'" 
					      class="profile-pic"
							@click="to"
					      :src="item.src"
					      mode="widthFix"
							style="height: auto;vertical-align:bottom"
					    ></image>
						  <!-- <view style="width:100%;height: 180px;" v-if="item.type==='video'">
						  	<m-video
						  	token="kIpX/a872fpDdeexUhBrIXUhsxldEOFukTZfdizDt3M=" 
						  	id="mVideo"
						  	ref="mVideo"
						  	:src="videoUrl"
						  	:poster="cover"
						  	/>
						  </view> -->
					  </template>
			</view>
		</view>
	</view>
	<uni-popup ref="sharePopup" type="bottom"  safeArea backgroundColor="#fff">
		<view class="popup-share">
					<view class="share-content">
						<button open-type="share" plain="true" class="share-button">
							<image class="share-image" :src="shareIncons[0].icon" mode="aspectFill"></image>
							<text class="share-text">{{shareIncons[0].text}}</text>
						</button>
						<button  plain="true" class="share-button" @click="poster">
							<image class="share-image" :src="shareIncons[1].icon" mode="aspectFill"></image>
							<text class="share-text">{{shareIncons[1].text}}</text>
						</button>
					</view>
			<view class="share-button-box">
				<button class="share-button" @click="shareClose">取消</button>
			</view>
		</view>
	</uni-popup>
</template>

<script setup>
	import {onMounted,ref,getCurrentInstance} from 'vue';
	import {baseUrl} from '../../config.js';
	import {getInfoByPhone} from '@/api/card.js'
	import {onShareAppMessage,onLoad,onUnload,onShow} from '@dcloudio/uni-app'
	import { getInfo } from '@/api/official.js';
	
	const { proxy } = getCurrentInstance()
	const formattedList = ref([]);
	const videoUrl = ref('');
	const cover = ref('');
	const array = ref([]);
	const show=ref(false)
	const mVideo=ref(null)
	const sharePopup=ref(null)
	const card = ref({})
	const sharePhone=ref('13539096806')
	const shareIncons=ref([{
		text:'微信好友',
		icon:'/static/wxfriend.png'
	},
	{
		text:'查看名片',
		icon:'/static/poster.png'
	}
	])
	onLoad((options) => {
	    // 优先使用传入的 phone 参数
	    if (options.phone) {
	        sharePhone.value = options.phone;
	    } else {
	        // 如果没有传入 phone 参数，尝试从本地存储中获取
	        sharePhone.value = uni.getStorageSync('sharePhone') || '13539096806';
	    }
	    // 将 sharePhone 的值存入本地存储
	    uni.setStorageSync('sharePhone', sharePhone.value);
	});

	onShow(async()=>{
		console.log('sharePhone',uni.getStorageSync('sharePhone'))
		uni.$on('cardUpdate',async(data)=>{
			sharePhone.value=data
			 uni.setStorageSync('sharePhone', sharePhone.value);
			 const res = await getInfoByPhone(sharePhone.value)
			 const array = res.data.description.split(",").map(fruit => fruit.trim());
			 card.value = res.data
			 card.value.description = array
			 uni.setStorageSync('cardPhone',card.value.phone)
			 uni.setStorageSync('cardQr',card.value.poster)
			 proxy.$forceUpdate(card.value)
		})
		
	})
	onMounted(async () => {
		const res = await getInfoByPhone(sharePhone.value)
		const array = res.data.description.split(",").map(fruit => fruit.trim());
		card.value = res.data
		card.value.description = array
		uni.setStorageSync('cardPhone',card.value.phone)
		uni.setStorageSync('cardQr',card.value.poster)
		const cardVideo=ref(null)
		if (formattedList.value.length === 0) {
		  uni.showToast({
		    title: '加载中',
		    icon: 'loading'
		  });
		}
		//官网信息
		const officialInfo = await getInfo();
		if (officialInfo && officialInfo.rows && officialInfo.rows.length > 0) {
		  array.value = officialInfo.rows[0].urls.split(",").map(url => url.trim());
		  videoUrl.value = officialInfo.rows[0].videoUrl;
		  cover.value = officialInfo.rows[0].cover;
		  // 构建新的列表，插入一个视频
		  const tempList = array.value.map(url => ({ type: 'image', src: url }));
		  tempList.splice(1, 0, { type: 'video', src: videoUrl.value });
		  formattedList.value = tempList;
		}
	})
	onShareAppMessage(async() => {
		return {
			from:'button',
			title: '手机电脑批发',
			path: `/pages/index/index?phone=${card.value.phone}`,
			imageUrl: card.value.sharePic
		}
	})

const shareClose=()=>{
	sharePopup.value.close()
}

const to=()=>{
	uni.navigateToMiniProgram({
		appId:'wx43b64a3b063fdcc4'
	})
}
const poster=()=>{
	uni.navigateTo({
		url:`/pages/detail/index?poster=${card.value.poster}`
	})
}
const share = () => {
	show.value=true
	sharePopup.value.open()
};


const copy = (data) => {
	uni.setClipboardData({
		data: data,
		success: function() {
			uni.showToast({
				title: '已复制',
				icon: 'success'
			})
		}
	});
}
const callNumber = () => {
	wx.makePhoneCall({
		phoneNumber: card.value.phone,
		success: function() {
			console.log("拨打电话成功！")
		},
		fail: function(res) {
			console.log(res)
		}
	})
}
	const onSaveContact = () => {
		// 存入通讯录逻辑
		const lastName=card.value.name.charAt(0)
		const firstName=card.value.name.slice(1)
		uni.addPhoneContact({
			lastName: lastName,
			firstName: firstName,
			title:card.value.job,
			organization:card.value.company,
			mobilePhoneNumber: card.value.phone,
			weChatNumber: card.value.wxNumber,
			success: function() {
				uni.showToast({
					title: '已存入通讯录！'
				});
			},
			fail: function() {
				console.log('fail');
			}
		});
		
	};
</script>

<style lang="scss" scoped>
	.header {
		display: flex;
		align-items: center;
	}

	.avatar {
		width: 100%;
		height: 400rpx;
	}

	.name {
		font-size: 20px;
		font-weight: bold;
	}

	.buttons {
		display: flex;
		justify-content: space-between;
		margin-top: 15px;
		margin-bottom: 10px;
	}

	.share-btn {
		background-color: white;
		/* 修改为白色背景 */
		color: #ff6600;
		/* 文字颜色可根据需求修改 */
		/* padding: 10px; */
		border-radius: 5px;
		border: 1px solid #ff6600;
		/* 添加边框 */
	}

	.save-btn {
		background-color: orange;
		/* 橙色背景 */
		color: white;
		/* padding: 10px; */
		border-radius: 5px;
		border: none;
	}

	.scroll-container {
		width: 100%;
		overflow-x: auto;
		/* 允许水平滚动 */
	}

	.contact-wrapper {
		display: flex;
		/* 使用 flexbox 布局 */
	}

	.contact-info {
		
		margin-top: 5px;
		margin-bottom: 5px;
		margin-left: 5px;
		/* 实线边框 */
		flex-shrink: 0;
		/* 不允许缩小 */
		width: 120px;
		/* 固定宽度 */
		margin-right: 10px;
		/* 右间距 */
		padding: 10px;
		/* 内边距 */
		border-radius: 5px;
		/* 圆角 */
		box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
		/* 阴影效果 */
		text-align: center;
		/* 确保文本水平居中 */
		overflow: hidden;
		/* 隐藏溢出 */
		text-overflow: ellipsis;
		/* 溢出时显示省略号 */
		white-space: nowrap;
		/* 不换行 */
	}

	.contact-row {
		display: flex;
		/* 使用 flexbox */
		align-items: center;
		/* 垂直对齐 */
	}

	.label {
		font-size: 14px;
		/* 字体大小 */
		margin-left: 5px;
		/* 左间距 */
		color: #333;
		/* 字体颜色 */
	}
	button[plain] {
		border: 0
	}

	.info {
		font-size: 12px;
		/* 字体大小 */
		color: #666;
		/* 字体颜色 */

	}

	.social {
		margin-top: 20px;
	}

	.introduction {
		margin-top: 30px;
	}

	.title {
		font-size: 18px;
		font-weight: bold;
	}

	.card {
		margin-top: 20px;
		width: 100%;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
		border-radius: 10px;
	}

	.profile-pic {
		margin-top: -4px;
		width: 100%;
	}

	.share_content {
		display: flex;
		flex-direction: column;
		padding: 20px;
		background-color: #fff;
	}

	.btn_container {
		display: flex;
		justify-content: center;
		/* 左右对齐 */
	}

	.btn_box {
		display: flex;
		flex-direction: column;
		margin: 0 30px;
		align-items: center;
	}

	.img {
		width: 60px;
		height: 60px;
		border-radius: 50%;
	}

	.text {
		margin-top: 10px;
		color: #333;
		font-size: 14px;
		text-align: center;
	}

	.line {
		width: 100%;
		background-color: grey;
		margin: 5px 0;
	}

	.close {
		text-align: center;
		background-color: white;
		color: #333;
		font-size: 25px;
	}
	.popup-share {
		background-color: #fff;
		border-top-left-radius: 11px;
		border-top-right-radius: 11px;
	}
	.share-content {
		display: flex; /* 使用 flex 布局 */
		flex-direction: row; /* 主轴方向为行 */
		justify-content: center; /* 水平方向居中对齐 */
		padding-top: 10px; /* 顶部内边距 */
	}
	.share-image {
		width: 60px;
		height: 60px;
	}
	
	.share-text {
		font-size: 16px;
		color: #3B4144;
	}
	
	.share-button {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		
		border-radius: 50px;
		color: #666;
		font-size: 15px;
	}
	.prodCanvas {
	  width: 100%;
	  height: 400px;
	  position: absolute;
	  right: 9999px;
	}
</style>